<template>
  <div class="address">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">地址管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>地址列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="margin-top: 25px">
      <el-input v-model="search" placeholder="请输入手机号或姓名" />
      <el-button
        type="primary"
        v-model="search"
        class="tianjia"
        @click="handleSearch"
        >搜索用户</el-button
      >
      <el-button type="primary" class="tianjia" @click="back">返回</el-button>
      <el-table :data="tableData" style="width: 100%; margin-top: 40px">
        <el-table-column type="index" label="序号" width="150" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="age" label="年龄" width="120" />
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="addresslist" label="地址" width="600" />

        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              size="small"
              class="xiabtn"
              @click.prevent="deleteRow(scope.row)"
            >
              删除
            </el-button>
            <el-button
              link
              default
              type="primary"
              @click.prevent="edit(scope.row)"
              size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :currentPage="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :small="small"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChage"
        @current-change="changePage"
      />
    </el-card>
  </div>
</template>

<script setup >
import axios from "axios";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { address_list, address_search, address_del } from "../../utils/api";
var $router = useRouter();
var tableData = ref([]);
var data = ref([]);
var currentPage = ref(1);
var pageSize = ref(10);
var pageSizes = ref([1, 2, 3, 5, 10, 20, 50]);
var total = ref(0);
var small = ref(false);
var background = ref(false);
var search = ref("");

const pageChage = (val) => {
  // console.log(`${val} items per page`);
  // pageSize.value = val;
  pageSize.value = val;
  address_list().then((res) => {
    data.value = res.data.list;
    tableData.value = data.value.slice(
      (currentPage.value - 1) * pageSize.value,
      currentPage.value * pageSize.value
    );
    total.value = data.value.length;
  });
  // console.log(res.data.list);
};
const changePage = (val) => {
  currentPage.value = val;
  address_list().then((res) => {
    data.value = res.data.list;
    tableData.value = data.value.slice(
      (currentPage.value - 1) * pageSize.value,
      currentPage.value * pageSize.value
    );
    total.value = data.value.length;
  });
};
var handleSearch = () => {
  address_search({ id: search.value }).then((res) => {
    console.log(res.data);
    search.value = "";
    if (res.data.code == 200) {
      ElMessage({
        showClose: true,
        message: res.data.msg,
        type: "success",
        duration: 1000,
      });
      data.value = res.data.list;
      tableData.value = data.value.slice(
        (currentPage.value - 1) * pageSize.value,
        currentPage.value * pageSize.value
      );
      total.value = data.value.length;
    } else {
      ElMessage({
        showClose: true,
        message: res.data.msg,
        type: "error",
        duration: 1000,
      });
    }
  });
};
// var pageSize2 = ref(tableData.value / 5);
var deleteRow = (row) => {
  address_del({ id: row.id }).then((res) => {
    address_list().then((res) => {
      console.log(res.data.list);
      data.value = res.data.list;
      tableData.value = data.value.slice(
        (currentPage.value - 1) * pageSize.value,
        currentPage.value * pageSize.value
      );
      total.value = data.value.length;
    });
    // tableData.value = res.data.list;
  });
};

const detail = () => {
  console.log("详情");
};
var edit = (row) => {
  console.log(row);
  $router.push({
    path: "/index/addressedit",
    query: { rowlist: JSON.stringify(row) },
  });
};
var back = () => {
  address_list().then((res) => {
    console.log(res.data.list);
    data.value = res.data.list;
    tableData.value = data.value.slice(
      (currentPage.value - 1) * pageSize.value,
      currentPage.value * pageSize.value
    );
    total.value = data.value.length;
  });
};
onMounted(() => {
  address_list().then((res) => {
    console.log(res.data.list);
    data.value = res.data.list;
    tableData.value = data.value.slice(
      (currentPage.value - 1) * pageSize.value,
      currentPage.value * pageSize.value
    );
    total.value = data.value.length;
  });
});
</script>

<style  lang="scss" scoped>
// .title {
//   height: 20px;
//   /* font-weight: bold; */
//   line-height: 20px;
//   text-align: center;
//   margin: 10px;
//   .el-input__inner {
//     width: 50%;
//   }
// }
.el-input {
  width: 50%;
}
.tianjia {
  margin-left: 50px;
}
.good-container {
  min-height: 100%;
}
.el-card.is-always-shadow {
  min-height: 100% !important;
}

.el-table .el-button {
  width: 70px;
  height: 30px;
  margin: 5px 0;
  margin-right: 20px !important;
  color: black;
  border: 1px solid #4caf50;
  text-align: center;
  line-height: 30px;
  &:nth-child(2) {
    border: 1px solid #4caf50;
  }
}
.el-table .el-button:hover {
  background-color: #4caf50;
  color: white;
  &:nth-child(2) {
    background-color: #4caf50;
  }
}
.el-message-box__status {
  position: absolute !important;
}
.xiabtn {
  border: 1px solid lightcoral !important;
}
.xiabtn:hover {
  background-color: lightcoral !important;
}
</style>